<template>
  <div class='container'>
    <Header breadcrumb='S7F19' title='S7F19' />
    <div class='form'>
      <el-row :gutter='30'>
        <el-col :span='3'>
          <div class='label'>握手等待时间:</div>
        </el-col>
        <el-col :span='5'>
          <el-input placeholder='握手等待时间' v-model='S7F19.shakeHandsWaitTime' clearable></el-input>
        </el-col>
        <el-col :span='13'>
        </el-col>
      </el-row>
      <el-row :gutter='30'>
        <el-col :span='3'>
          <div class='label'>标题信息:</div>
        </el-col>
        <el-col :span='5'>
          <div class='label'>变量地址:</div>
        </el-col>
        <el-col :span='4'>
          <div class='label'>变量类型:</div>
        </el-col>
        <el-col :span='4'>
          <div class='label'>变量名称:</div>
        </el-col>
        <el-col :span='2'>
          <div class='label'>单变量长度:</div>
        </el-col>
        <el-col :span='2'>
          <div class='label'>变量倍率:</div>
        </el-col>
        <el-col :span='2'>
          <div class='label'>变量数量:</div>
        </el-col>
        <el-col :span='2'>
          <div class='label'>变量初始值:</div>
        </el-col>
        <el-col :span='3'>
        </el-col>
      </el-row>
      <el-row :gutter='30'>
        <el-col :span='3'>
          <div class='label'>握手发送:</div>
        </el-col>
        <el-col :span='5'>
          <el-input placeholder='地址' v-model='S7F19.shakeHandsSend.addr' clearable></el-input>
        </el-col>
        <el-col :span='4'>
          <el-select v-model='S7F19.shakeHandsSend.type'>
            <el-option v-for='(value, name) in plcTypeOptions' :key='value' :value='name' :label='value'></el-option>
          </el-select>
        </el-col>
        <el-col :span='4'>
          <el-input placeholder='名称' v-model='S7F19.shakeHandsSend.name' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
          <el-input placeholder='变量长度' v-model='S7F19.shakeHandsSend.len' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
          <el-input placeholder='倍率' v-model='S7F19.shakeHandsSend.factor' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
        </el-col>
      </el-row>
      <el-row :gutter='30'>
        <el-col :span='3'>
          <div class='label'>握手接收:</div>
        </el-col>
        <el-col :span='5'>
          <el-input placeholder='地址' v-model='S7F19.shakeHandsRev.addr' clearable></el-input>
        </el-col>
        <el-col :span='4'>
          <el-select v-model='S7F19.shakeHandsRev.type'>
            <el-option v-for='(value, name) in plcTypeOptions' :key='value' :value='name' :label='value'></el-option>
          </el-select>
        </el-col>
        <el-col :span='4'>
          <el-input placeholder='名称' v-model='S7F19.shakeHandsRev.name' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
          <el-input placeholder='变量长度' v-model='S7F19.shakeHandsRev.len' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
          <el-input placeholder='倍率' v-model='S7F19.shakeHandsRev.factor' clearable>
          </el-input>
        </el-col>
        <el-col :span='3'>
        </el-col>
      </el-row>
      <el-row :gutter='30'>
        <el-col :span='3'>
          <div class='label'>PPID:</div>
        </el-col>
        <el-col :span='5'>
          <el-input placeholder='地址' v-model='S7F19.recipe.addrHead' clearable></el-input>
        </el-col>
        <el-col :span='4'>
          <el-select v-model='S7F19.recipe.type'>
            <el-option v-for='(value, name) in plcTypeOptions' :key='value' :value='name' :label='value'></el-option>
          </el-select>
        </el-col>
        <el-col :span='4'>
          <el-input placeholder='名称' v-model='S7F19.recipe.name' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
          <el-input placeholder='每个变量的长度' v-model='S7F19.recipe.len' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
          <el-input placeholder='倍率' v-model='S7F19.recipe.factor' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
          <el-input placeholder='长度' v-model='S7F19.recipe.addrNum' clearable>
          </el-input>
        </el-col>
        <el-col :span='2'>
          <el-input placeholder='初始值' v-model='S7F19.recipe.addrStart' clearable>
          </el-input>
        </el-col>
        <el-col :span='3'>
        </el-col>
      </el-row>

      <el-row :gutter='20'>
        <el-col :span='3' offset='5'>
          <div class='grid-content bg-purple'>
            <el-button type='primary' size='small' icon='el-icon-check' :loading='loading' @click='submit'>保存
            </el-button>
          </div>
        </el-col>
        <el-col :span='3'>
          <div class='grid-content bg-purple'>
            <el-button type='primary' size='small' icon='el-icon-check' :loading='loading' @click='refresh'>刷新
            </el-button>
          </div>
        </el-col>
        <el-col :span='3'>
          <div class='grid-content bg-purple'>
            <el-button type='primary' icon='el-icon-receiving' size='small' :loading='loading'
                       :disabled='checking|| improtUrlDisabled' @click='selectFile($event)'>导入
            </el-button>
            <input type='file' name='' id='uploadEventFile' style='display:none' @change='importS7F19Conf($event)'
                   accept='.json, application/json, text/json'>
          </div>
        </el-col>
        <el-col :span='3'>
          <div class='grid-content bg-purple'>
            <el-button type='primary' icon='el-icon-paperclip' size='small' :loading='loading'
                       :disabled='checking|| exportUrlDisabled' @click='exportS7F19Conf'>导出
            </el-button>
          </div>
        </el-col>
        <el-col :span='9'></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  exportS7F19Conf, getS7F19Info, importS7F19Conf, setS7F19Info,
} from '@/api/request';
import Header from './common/Header.vue';

export default {
  name: 'S7F19',
  data() {
    return {
      plcTypeOptions: this.$store.state.plcTypeOptions || {},
      loading: false,
      S7F19: {
        shakeHandsSend: {
          addr: '',
          addrHead: '',
          addrNum: 0,
          addrCnt: 0,
          type: '',
          name: '',
          len: '',
          factor: 1.0,
        },
        shakeHandsRev: {
          addr: '',
          addrHead: '',
          addrNum: '',
          addrCnt: 0,
          type: '',
          name: '',
          len: '',
          factor: 1.0,
        },
        recipe: {
          addr: '',
          addrHead: '',
          addrNum: 0,
          addrCnt: 0,
          type: '',
          name: '',
          len: 1,
          factor: 0.0,
          addrStart: 0,
        },
      },
    };
  },
  components: {
    Header,
  },
  created() {
    this.getS7F19Info3();
  },
  methods: {
    getS7F19Info3() {
      getS7F19Info()
        .then((res) => {
          if (res) {
            this.S7F19 = res;
          }
        });
    },
    submit() {
      setS7F19Info(this.S7F19)
        .then((res) => {
          if (res && res.status === 200) {
            this.$message({
              message: res.msg || '保存设置成功',
              type: 'success',
            });
          }
        });
    },
    refresh() {
      getS7F19Info()
        .then((res) => {
          if (res) {
            this.S7F19 = res;
          }
        });
    },
    importS7F19Conf(event) {
      this.$parent.loading = true;
      const file = event.target.files[0];
      importS7F19Conf(file)
        .then((res) => {
          console.log('res:', res);
          this.$message({
            message: res.msg,
            type: res.status === 200 ? 'success' : 'error',
          });
          // 刷新父组件数据
          if (res.status === 200) {
            this.refresh();
          }
        })
        .catch((error) => {
          this.$message.error(error.message || '发生了网络错误');
        })
        .finally(() => {
          this.$parent.loading = false;
        });
    },
    exportS7F19Conf() {
      exportS7F19Conf()
        .then((res) => {
          if (res && res.data) {
            const { data } = res;
            const result = JSON.stringify(data, null, 2);
            console.log(result);
            const blob = new Blob([result], {
              type: 'text/json;charset=utf-8;',
            });
            const filename = res.fileName || '导出数据';
            if (navigator.msSaveBlob) {
              // IE 10+
              navigator.msSaveBlob(blob, filename);
            } else {
              const link = document.createElement('a');
              if (link.download !== undefined) {
                // feature detection
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', filename);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
              }
            }
            this.$message({
              message: '导出数据成功',
              type: 'success',
            });
          }
        });
      this.exportVisible = false;
    },
    selectFile(event) {
      event.preventDefault();
      document.querySelector('#uploadEventFile')
        .click();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.el-row {
  margin-bottom: 20px;
}

.container {
  .form {
    margin: 1rem;
    display: flex;
    flex-direction: column;

    .item {
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      width: 45%;

      label {
        width: 200px;
        text-align: right;
        padding-right: 1rem;
      }

      .el-input,
      .el-select {
        width: 300px;
      }
    }

    .buttons {
      margin-top: 2rem;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
